<template>
  <div class="bg_color">
    <div class="bg_grid"></div>
    <div class="tebonPic">
      <van-image width="114" height="103" :src="require('../../assets/images/wait.png')" />
    </div>
    <div class="step" :style="stepStyleObj"></div>
  </div>
</template>

<script>
export default {
  name: 'HomePage',
  data() {
    return {
      stepWidth: 40
    }
  },
  computed: {
    stepStyleObj() {
      return {
        'background-size': `${this.stepWidth}% 100%`
      }
    }
  },
  mounted() {},
  methods: {
    goStep() {
      setTimeout(() => {
        this.stepWidth += 10
      }, 1000)
    }
  },
  watch: {
    stepWidth: {
      handler: function (val, oldVal) {
        if (val <= 100) {
          this.goStep()
        } else {
          this.$router.push('/redPackage')
        }
      },
      immediate: true
    }
  }
}
</script>

<style lang="less" scoped>
.tebonPic {
  position: absolute;
  top: 30%;
  left: calc(~'50% - 51px');
  .progress {
    margin-top: 10px;
  }
}
.step {
  position: absolute;
  top: 43%;
  margin-top: 10px;
  margin-left: 10%;
  width: 80%;
  height: 10px;
  background: #ffffff;
  border-radius: 10px;
  background-image: url('../../assets/images/step.png');
  // background-size: 70% 100%;
  background-repeat: no-repeat;
  transition: all 1s;
}
</style>

